vue(1)-学习历程之vue解决jquery的什么痛点

vue解决jquery的痛点

首先我们需要明白和理解jquery和vue的设计初衷和理念。

1. jquery官网给出的开篇介绍是，jquery是一个快，小，功能丰富的js库，它让html文档遍历和操作，事件处理，动画，以及ajax等提供了简单易用的API，并且可以在众多浏览器中使用。

   jQuery is a fast, small, and feature-rich JavaScript library. It makes
   things like HTML document traversal and manipulation, event handling,
   animation, and Ajax much simpler with an easy-to-use API that works
   across a multitude of browsers.

   所有js库要解决的问题*： 简单语法（查找DOM元素，对DOM元素进行操作）解决浏览器兼容性问题

   jquery这个js库比其他js库受欢迎的地方在于：所有一切都在jquery对象里面，入口是查询，结果是操作

   库，开发者自由控制，搭建前端

2. Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
   所有js框架要解决的问题*： 应对需求变化，防止大面积重写。让开发者遵循框架的规范和规则构建项目，追求高效，团队协作，代码利用率和可扩展性
   vue这个js框架比其他js框架受欢迎的地方在于：

   组件化：一个大型页面切分成一个一个更小的可控单元；方便后续优化，使用组件可以降低模块耦合度，组件所依赖的资源全部封装在组件内部调用。

   ---

   数据侦听，双向绑定：(js中有两种方法可以侦测到变化，object.defineProperty和ES6的proxy)vue使用的是object.defineProperty.
   我们之所以要观察一个数据，是为了当数据发生变化时，可以通知到使用该数据的地方。先把使用该数据的地方收集起来（术语是收集依赖getter），当变化时，再触发依赖setter
   依赖收集到哪，数组Dep,存储依赖。
   数据变化时，我们需要集中通知给各个地方，让中介watcher来通知吧

   ---

   客户端路由：单页面应用，不做就不需要，一个url对应一个应用

   ---

   大规模状态管理： 应用简单时，一个基础状态和界面映射就可以解决问题，应用很大时，涉及多人合作，需要多个组件之间共享，多个组件需要去改动同一份状态，如何使大规模应用高效运行。

   ---

   构建工具：打包和工程构建

---

渐进式vue框架，自底向上增量开发，为什么选择vue而不是jquery

1. 你不想用vue的数据驱动DOM变化，不想组件化，那你可以用vue当成一个js库来使用，简单的收集form表单，表单验证。如果你碰到多次改需求，你会发现vue要改的代码比jquery少的多。
2. 大胆一些，你想把整个页面的dom用Vue来管理，如新闻列表用v-for来循环，评论交互有些复杂，你抽象成小组件，这个过程就会把关注点从原来的jquery dom操作变成关注数据变化。于是你开始用虚拟dom，数据双向绑定，差量更新
3. 你要做个webApp，于是你了解webpack vue-router,你发现前端可以控制路由了，vue-router单页面却可以切换组件，不是f5刷新的感觉
4. 滚动播放视频，前端和后端的接口沟通很频繁，大量的数据在组件中共享，你找解决方法，发现vueX处理数据在组件之间流动得心应手。
5. 慢慢的你开始关注用户数据增长，你发现第2部，新闻列表和评论整个页面用vue管理开发很方便，但是页面白屏时间长，类似这样的底层页对seo很不好。你开始考虑vue 2.0的SSR。为了保证团队高质量输出，你开始研究给vm写单元测试....

综以上5点，我真的不知道有什么理由不用vue，因为你用了vue，你也可以用jquery啊，在vue中什么时候用Jquery会更高效，答案是动画。因为vue侧重数据。

参考文献：

1. vue渐进式框架理解：https://www.zhihu.com/questio...
2. vue核心功能原理解析https://www.cnblogs.com/dhsz/...
3. 百度网盘视频学习以及源码资源https://pan.baidu.com/s/1bpD6hUR 提取密码 aebz